<#assign baseURL = springMacroRequestContext.getContextPath() />
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拓深科技</title>
<#include "./css.ftl">
</head>
<body>
<div id="wrapper">
<#include "./left_nav.ftl">

    <div id="page-wrapper" class="gray-bg dashbard-1">
    <#include "./top_nav.ftl">
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-9">
                <h2>地图配置</h2>
                <ol class="breadcrumb">
                    <li>
                        消防用水管理系统
                    </li>
                    <li class="active">
                        地图配置
                    </li>
                </ol>
            </div>
        </div>

    <#if (role_type_id < 3 )>
        <div class="wrapper wrapper-content">
            <div class="row">
                <div class="col-lg-3">
                    <div class="row">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div id="jsTreeJSON"></div>
                            </div>
                        </div>

                        <div class="tabs-container">
                            <ul class="nav nav-tabs">
                                <li class="active"><a data-toggle="tab" href="#tab-1"><i class="fa fa-cogs"></i></a></li>
                                <li class=""><a data-toggle="tab" href="#tab-2"><i class="fa fa-building"></i></a></li>
                            </ul>
                            <div class="tab-content">
                                <div id="tab-1" class="tab-pane active">
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div class="well" style="padding: 5px 0 0 0" align="center">
                                                    <p>选择水压主机的通道信息，然后在地图上标注热点。</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-xs-12">
                                                <form id="channelSelectForm" class="form-horizontal">
                                                    <div class="form-group"><label class="col-lg-3 control-label">主机选择</label>
                                                        <div class="col-lg-9"><select id="deviceSelect"  class=" form-control " tabindex="-1" aria-hidden="true" style="width: 100%"></select></div>
                                                    </div>
                                                    <div class="form-group"><label class="col-lg-3 control-label">通道选择</label>
                                                        <div class="col-lg-9"><select id="channelSelect"  class=" form-control " tabindex="-1" aria-hidden="true" style="width: 100%"></select></div>
                                                    </div>
                                                    <div class="form-group"><label class="col-lg-3 control-label">标注名称</label>
                                                        <div class="col-lg-9"><input id="nameInput"  class="form-control" ></div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                        <div class="row" style="display: none">
                                            <div class="col-xs-12" >
                                                <div class="row">
                                                    <div class="col-xs-1">
                                                        <label >X:</label>
                                                    </div>
                                                    <div class="col-xs-4 " >
                                                        <input id="xInput" disabled  class="form-control" >
                                                    </div>
                                                    <div class="col-xs-1">
                                                        <label >Y:</label>
                                                    </div>
                                                    <div class="col-xs-4" >
                                                        <input id="yInput" disabled  class="form-control" >
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top: 10px;">
                                            <div class="col-sm-12" style="padding-right: 0;">
                                                <div class="col-sm-6 pull-right" >
                                                    <button id="posBtn" type="button" class="btn btn-block btn-info"><i class="fa fa-map-marker"></i> &nbsp;保存坐标点</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="tab-2" class="tab-pane">
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div class="well" style="padding: 5px 0 0 0" align="center">
                                                    <p>选择区域图，然后在区域图上标注受监测的建筑物。</p>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-xs-12">
                                                <form id="locationSelectForm" class="form-horizontal">
                                                    <div class="form-group"><label class="col-lg-3 control-label">标注目标</label>
                                                        <div class="col-lg-9"><select id="locationSelect"  class=" form-control " tabindex="-1" aria-hidden="true" style="width: 100%"></select></div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>

                                        <div class="row" style="margin-top: 10px;">
                                            <div class="col-sm-12" style="padding-right: 0;">
                                                <div class="col-sm-6 pull-right" >
                                                    <button id="locationPosBtn" type="button" class="btn btn-block btn-info"><i class="fa fa-map-marker"></i> &nbsp;保存坐标点</button>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="panel panel-default">
                        <div class="panel-heading" style="padding: 5px 5px 5px 5px" >
                            <div class="row">
                                <div class="col-md-12" style="padding: 0 0 0 0">
                                    <div class="col-md-2" >
                                        <button id="addFloorBtn" type="button" class="btn btn-block btn-primary btnFlag" data-toggle="modal" data-target="#floorAddModal" ><i class="fa fa-plus"></i>&nbsp;&nbsp;添加楼层</button>
                                    </div>
                                    <div class="col-md-2" >
                                        <button id="addBuildingBtn" type="button" class="btn btn-block btn-primary btnFlag" data-toggle="modal" data-target="#buildingAddModal" ><i class="fa fa-plus"></i>&nbsp;&nbsp;添加建筑</button>
                                    </div>
                                    <div class="col-md-2" >
                                        <button type="button" class="btn btn-block btn-primary btnFlag" data-toggle="modal" data-target="#areaAddModal" ><i class="fa fa-plus"></i>&nbsp;&nbsp;添加区域</button>
                                    </div>
                                    <div class="modal inmodal" id="areaAddModal"  role="dialog" aria-hidden="true" >
                                        <div class="modal-dialog">
                                            <div class="modal-content animated bounceInRight">
                                                <div class="modal-header">
                                                    <i class="fa fa-hospital-o modal-icon"></i>
                                                    <h4 class="modal-title">添加区域位置信息</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <form id="areaForm" class="form-horizontal">
                                                        <div class="form-group"><label class="col-lg-2 control-label">区域名称</label>
                                                            <div class="col-lg-10"><input id="areaInput"  class="form-control" name="areaInput" ></div>
                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="modal-footer">
                                                    <button id="areaCANCEL" type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-mail-reply"></i>&nbsp;&nbsp;取消</button>
                                                    <button id="areaSave" type="button" class="btn btn-primary"><i class="fa fa-check"></i>&nbsp;&nbsp;保存</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal inmodal" id="buildingAddModal"  role="dialog" aria-hidden="true" >
                                        <div class="modal-dialog">
                                            <div class="modal-content animated bounceInRight">
                                                <div class="modal-header">
                                                    <i class="fa fa-hospital-o modal-icon"></i>
                                                    <h4 class="modal-title">添加建筑物位置信息</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <form id="buildingForm" class="form-horizontal">
                                                        <div class="form-group"><label class="col-lg-3 control-label">区域名称</label>
                                                            <div class="col-lg-9"><select id="areaSelect"  class=" form-control " tabindex="-1" aria-hidden="true" style="width: 100%"></select></div>
                                                        </div>
                                                        <div class="form-group"><label class="col-lg-3 control-label">建筑物名称</label>
                                                            <div class="col-lg-9"><input id="buildingInput"  class="form-control" name="buildingInput" ></div>
                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="modal-footer">
                                                    <button id="buildingCANCEL" type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-mail-reply"></i>&nbsp;&nbsp;取消</button>
                                                    <button id="buildingSave" type="button" class="btn btn-primary"><i class="fa fa-check"></i>&nbsp;&nbsp;保存</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal inmodal" id="floorAddModal"  role="dialog" aria-hidden="true" style="z-index: 2" >
                                        <div class="modal-dialog">
                                            <div class="modal-content animated bounceInRight">
                                                <div class="modal-header">
                                                    <i class="fa fa-hospital-o modal-icon"></i>
                                                    <h4 class="modal-title">添加楼层位置信息</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <form id="floorForm" class="form-horizontal">
                                                        <div class="form-group"><label class="col-lg-3 control-label">区域名称</label>
                                                            <div class="col-lg-9"><select id="areaSelect2"  class=" form-control " tabindex="-1" aria-hidden="true" style="width: 100%"></select></div>
                                                        </div>
                                                        <div class="form-group"><label class="col-lg-3 control-label">建筑物名称</label>
                                                            <div class="col-lg-9"><select id="buildingSelect"  class=" form-control " tabindex="-1" aria-hidden="true" style="width: 100%"></select></div>
                                                        </div>
                                                        <div class="form-group"><label class="col-lg-3 control-label">楼层名称</label>
                                                            <div class="col-lg-9"><input id="floorInput"  class="form-control" name="floorInput" ></div>
                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="modal-footer">
                                                    <button id="floorCANCEL" type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-mail-reply"></i>&nbsp;&nbsp;取消</button>
                                                    <button id="floorSave" type="button" class="btn btn-primary"><i class="fa fa-check"></i>&nbsp;&nbsp;保存</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal inmodal" id="mapAddModal"  role="dialog" aria-hidden="true" >
                                        <div class="modal-dialog">
                                            <div class="modal-content animated bounceInRight">
                                                <div class="modal-header">
                                                    <i class="fa fa-hospital-o modal-icon"></i>
                                                    <h4 class="modal-title">添加地图信息</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <form id="mapForm" class="form-horizontal">
                                                        <div style="display: none" class="form-group"><label class="col-lg-3 control-label">位置ID</label>
                                                            <div class="col-lg-9"><input id="mapInput"  class="form-control" name="id" ></div>
                                                        </div>
                                                        <div class="form-group"><label class="col-lg-3 control-label">图片位置</label>
                                                            <div class="col-lg-9"><input id="mapInput" type="file"  class="form-control" name="file" placeholder="地图位置......"></div>
                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="modal-footer">
                                                    <button id="mapCANCEL" type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-mail-reply"></i>&nbsp;&nbsp;取消</button>
                                                    <button id="mapSave" type="button" class="btn btn-primary"><i class="fa fa-check"></i>&nbsp;&nbsp;保存</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal inmodal" id="changeModal"  role="dialog" aria-hidden="true" >
                                        <div class="modal-dialog">
                                            <div class="modal-content animated bounceInRight">
                                                <div class="modal-header">
                                                    <i class="fa fa-hospital-o modal-icon"></i>
                                                    <h4 class="modal-title">修改位置信息</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <form id="changeForm" class="form-horizontal">
                                                        <div class="form-group"><label class="col-lg-3 control-label">修改名称</label>
                                                            <div class="col-lg-9"><input id="changeInput"  class="form-control" name="changeInput" ></div>
                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="modal-footer">
                                                    <button id="changeCANCEL" type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-mail-reply"></i>&nbsp;&nbsp;取消</button>
                                                    <button id="changeSave" type="button" class="btn btn-primary"><i class="fa fa-check"></i>&nbsp;&nbsp;保存</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2" >
                                        <button id="mapBtn" type="button" class="btn btn-block btn-success btnFlag" data-toggle="modal" data-target="#mapAddModal" ><i class="fa fa-file-photo-o"></i>&nbsp;&nbsp;添加地图</button>
                                    </div>
                                    <div class="col-md-2" >
                                        <button id="changeBtn" type="button" class="btn btn-block btn-warning btnFlag" data-toggle="modal" data-target="#changeModal" ><i class="fa fa-edit"></i>&nbsp;&nbsp;修改数据</button>
                                    </div>
                                    <div class="col-md-2" >
                                        <button id="deleteBtn" type="button" class="btn btn-block btn-danger btnFlag"><i class="fa fa-trash"></i>&nbsp;&nbsp;删除数据</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div  class="panel-body">
                            <div class="row">
                                <div id="showMap" class="col-md-12">
                                    <h5>点击左侧节点时，此处会显示地图。</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <#else >
        <div > <h1>你的账户没有权限配置此功能。</h1></div>
    </#if>


    <#include "./bottom_nav.ftl">
    </div>

</div>

<#include "./js.ftl">
<script>

<#if (role_type_id < 3 )>
    <#include "./assets/location.js">
</#if>

</script>
</body>
</html>